<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">套餐名称:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">实际价格:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" data-rule="required" class="form-control" name="row[price]" type="text" value="{$row.price|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">展示价格:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-show_price" data-rule="required" class="form-control" name="row[show_price]" type="text" value="{$row.show_price|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">有效期:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-length" data-rule="required" class="form-control selectpicker" name="row[length]" data-live-search="true">
				<option value="">请选择...</option>
                {foreach name="lengths" item="vo"}
                    <option value="{$vo}" {in name="vo" value="$row.length"}selected{/in}>{$vo}个月</option>
                {/foreach}
            </select>
        </div>
    </div>
<!--<div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">展示图片:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <div class="input-group">-->
<!--                <input id="c-image" data-rule="required" class="form-control" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}">-->
<!--                <div class="input-group-addon no-border no-padding">-->
<!--                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>-->
<!--                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>-->
<!--                </div>-->
<!--                <span class="msg-box n-right" for="c-image"></span>-->
<!--            </div>-->
<!--            <ul class="row list-inline faupload-preview" id="p-image"></ul>-->
<!--        </div>-->
<!--    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">套餐简介:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-info" data-rule="required" class="form-control " rows="5" name="row[info]" cols="50">{$row.info|htmlentities}</textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">购买须知:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-notices" class="form-control " rows="5" name="row[notices]" cols="50">{$row.notices|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">套餐详情:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">添加服务:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="service-select" class="form-control selectpicker" >
                <option value="">请选择服务</option>
                {foreach $services as $service}
                <option value="{$service.id}" data-name="{$service.name}">
                    {$service.name}
                </option>
                {/foreach}
            </select>
            <button type="button" id="add-service-btn" class="btn btn-primary btn-sm" style="margin-top:5px;">
                <i class="fa fa-plus"></i> 添加服务
            </button>
        </div>
    </div>

    <!-- 服务列表容器 -->
    <div id="services-container" class="services-container">
        <!-- 编辑时回显已选择的服务 -->
        {if !empty($row.services)}
            {foreach $row.services as $service}
            <div class="service-item" data-service-id="{$service.service_id}">
                <i class="fa fa-times remove-service"></i>
                <input type="hidden" name="row[service_id][]" value="{$service.service_id}">

                <div class="form-group">
                    <label class="control-label">服务名称:</label>
                    <div class="form-value">{$service.healthservice.name}</div>
                </div>

                <div class="form-group">
                    <label class="control-label">服务次数:</label>
                    <div class="form-value">
                        <input type="number" class="form-control" name="row[num][]"
                               value="{$service.num}" min="1" data-rule="required">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label">服务时长(小时):</label>
                    <div class="form-value">
                        <input type="number" class="form-control" name="row[duration][]"
                               value="{$service.duration}" min="0" >
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label">服务价值:</label>
                    <div class="form-value">
                        <input type="text" class="form-control" name="row[service_price][]"
                               value="{$service.price}" min="1" data-rule="required">
                    </div>
                </div>
            </div>
            {/foreach}
        {/if}
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">排序:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<style>
    /* 服务列表样式 */
    .services-container {
        margin-left: 16.6667%; /* 与label对齐 */
        margin-top: 20px;
    }

    .service-item {
        background: #f5f5f5;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 4px;
        position: relative;
    }

    .service-item .remove-service {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #dd4b39;
        cursor: pointer;
    }

    .service-item .form-group {
        margin-bottom: 10px;
    }

    .service-item .control-label {
        width: 100px;
        text-align: right;
        padding-right: 10px;
    }

    .service-item .form-value {
        display: inline-block;
        width: calc(100% - 120px);
    }
</style>
